<template>
  <div class="tableMore">
    <div class="feature">table单元格合并</div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      ref="orderTable"
    >
      <el-table-column label="订单id" prop="id"> </el-table-column>
      <el-table-column label="单价" prop="price"> </el-table-column>
      <el-table-column label="总价" prop="total"> </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="{ row }">
          <span
            @click="goDetail(row.id)"
            class="text-blue tableButton"
            >查看详情</span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      spanArr: [],
      pos: 0,
      tableData: [],
      newTables: [],
    };
  },
  methods: {

    goDetail(id) {},

    getRowKeys(row) {
      return row.id;
    },

    //选择网点
    slectRow(rows) {
      this.newTables = rows;
      console.log("选择-this.newTables", this.newTables);
    },

    getSpanArr() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach((item) => {
        item.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.tableData.length; i++) {
        // 内层循环，上面已经给所有的行都加了item.rowspan = 1
        // 这里进行判断
        // 如果当前行的CCOITEM_ID和下一行的CCOITEM_ID相等
        // 就把当前item.rowspan + 1
        // 下一行的item.rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.tableData[i].id === this.tableData[j].id) {
            this.tableData[i].rowspan++;
            this.tableData[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i].rowspan - 1;
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //第一列
      if (columnIndex === 0 || columnIndex === 3) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        };
      }
    },

    treeToFlat(data) {
      let ary = [];
      data.forEach((item) => {
        if (item.children) {
          // console.log("item", item);
          //ary.push(item);
          if (item.children.length > 0) {
            let child = item.children.map((item1) => {
              return {
                id: item.id,
                price: item1.price,
                total: item1.total,
              };
            });
            ary.push(...this.treeToFlat(child));
          }
        } else {
          ary.push(item);
        }
        delete item.children;
      });
      return ary;
    },
  },

  async created() {
    let tableData = [
      {
        id: 1,
        children: [
          {
            price: "1-5",
            total: "子类1",
          },
          {
            price: "1-6",
            total: "子类2",
          },
        ],
      },
      {
        id: 2,
        children: [
          {
            price: "5",
            total: "小xiao小",
          },
        ],
      },
      {
        id: 3,
        children: [
          {
            price: "3-5",
            total: "子类1",
          },
          {
            price: "3-6",
            total: "子类2",
          },
        ],
      },
    ];

    //console.log('this.treeToFlat(tableData1)',this.treeToFlat(tableData1));
    this.tableData = await this.treeToFlat(tableData);
    // this.tableData = [
    //   { id: 1, price: 5, total: "子类1" },
    //   {
    //     id: 1,
    //     price: 6,
    //     total: "子类2",
    //   },
    //   { id: 2, price: 5, total: "子类1" },
    //   { id: 3, price: 6, total: "子类1" },
    //   {
    //     id: 3,
    //     price: 7,
    //     total: "子类2",
    //   },
    // ];

    // let arr = this.tableData.map((item) => {
    //   let childArr = item.children.map((childItem) => {
    //     console.log("item", item.id);
    //     console.log("childItem", childItem);
    //     return {
    //       id: item.id,
    //       price: childItem.price,
    //       total: childItem.total,
    //     };
    //   });

    //   console.log("childArr", childArr);
    //   return childArr;
    // });
    // console.log("arr", arr);

    this.getSpanArr(this.tableData); //把表格数据给到getSpanArr
  },
};
</script>

<style lang="scss" scoped>
.feature {
  text-align: left;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}

// 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
.tableMore ::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
// 如果td没有颜色，可以去掉，这里加上保险
.tableMore ::v-deep .el-table__body tr.hover-row > td {
  background-color: transparent;
}

.tableMore ::v-deep .el-table th.is-leaf,
.tableMore ::v-deep .el-table .cell {
  text-align: center;
}
</style>
